<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*----------------------------------------最上边导航条全部内容样式--------------------------------------------------------*/
        #deng-shang-1 { /*最上边导航条*/
            width: 1430px;
            height: 100px;
            background: #444250;
            margin: 0 auto; /*页面整体居中*/
            position: relative; /*为相对定位参照物*/
            top: -15px;
        }

        .deng-shang-1-4:hover { /*更改悬停状态*/
            color: red;
            text-decoration: none;
        }

        #deng-img-1-1 { /*左上的图*/
            width: 200px;
            height: 60px;
            position: absolute; /*绝对对定位*/
            left: 40px;
            top: 9px;
        }

        #deng-shang-1-2 { /*首页分类部分*/
            list-style-type: none; /*去掉图标*/
            overflow: hidden; /*避免为0*/
            position: relative;
            left: 450px;
            top: 15px;
        }

        .deng-shang-1-3 {
            float: left; /*全部向左浮动*/
            margin: 10px 20px;
        }

        .deng-shang-1-4 { /*控制头部分类*/
            text-decoration: none; /*去掉下划线*/
            color: white;
            font-size: 22px;
        }

        /*--------------------------------------烤猪蹄美图部分---------------------------------------------------*/
        #Taset {
            text-align: center;
            background: #302a34;
            width: 1430px;
            height: 2045px;
            position: relative;
            top: 17px;
        }

        #d7 {/*招牌美食*/
            padding: 4px 5px;
            background: #dfd1b5;
            width: 145px;
            border-radius: 50px;
            margin: 0 auto;
            text-align: center;
            position: absolute;
            top: 7px;
            left: 650px;

        }

        #hbyb > img {
            width: 1430px;
            height: 390px;
            position: relative;
            top: 40px;
        }

        #hbyb1 {
            font-size: 20px;
            position: relative;
            top: 45px;
        }

        #hbyb2 {
            font-size: 14px;
            position: relative;
            top: 53px;
        }

        #xsy > img {
            width: 1430px;
            height: 390px;
            position: relative;
            top: 75px;
        }

        #xsy1 {
            font-size: 20px;
            position: relative;
            top: 80px;
        }

        #xsy2 {
            font-size: 14px;
            position: relative;
            top: 85px;
        }

        #kzt > img {
            width: 1430px;
            height: 390px;
            position: relative;
            top: 110px;
        }

        #kzt1 {
            font-size: 20px;
            position: relative;
            top: 115px;
        }

        #kzt2 {
            font-size: 14px;
            position: relative;
            top: 120px;
        }

        #lyrjb > img {
            width: 1430px;
            height: 390px;
            position: relative;
            top: 145px;
        }

        #lyrjb1 {
            font-size: 20px;
            position: relative;
            top: 150px;
        }

        #lyrjb2 {
            font-size: 14px;
            position: relative;
            top: 155px;
        }
        /*-----------------------------------------下边小图---------------------------------------------------*/
        body{
            margin: 0;
            padding: 0;
            height: 100%;
            background: #302a34;

        }

        .row{
            margin-left: -15px;
            margin-right: -15px;
            width: 1100px;
            height: 1800px;
            text-align: center;
            position: relative;
            left: 220px;

        }
        .col_6{
            width: 490px;
            height: 290px;
            float: left;
            min-height: 1px;
            padding-left: 15px;
            padding-right: 15px;
            position: relative;
            text-align: center;
        }
        .col_6 img{
            width: 100%;
            height: 85%;
        }
        .col-3{
            width: 230px;
            height: 290px;
            float: left;
            min-height: 1px;
            padding-left: 15px;
            padding-right: 15px;
            position: relative;
            margin-bottom: 130px;
            text-align: center;
        }
        .col-3>.it-food2{
            margin-bottom: 15px;
        }

        .col-3 img{
            width: 100%;
            height: 85%;
        }
        .dh3{
            position: relative;
            top: 15px;
        }
        h3{
            background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
            color: #fff;
            font-weight: 200;
            padding: 10px 0;
            border-top: 2px solid #e4007f;
            width: 100%;
            font-size: 14px;
            margin: 0;
            position: absolute;
            bottom: 0;
        }
        .it-food2{
            transition-duration: 2s;

        }
        .it-food2:hover{
            transform: scale(1.2);/*缩放1.2呗*/

        }
        .it-food1{
            transition-duration: 2s;

        }
        .it-food1:hover{
            transform: scale(1.2);/*缩放1.2呗*/

        }
 /*-----------------------------------------------最最下边---------------------------------------------------*/
        #deng-xia-1-6 { /*最最下边*/
            width: 1430px;
            height: 123px;
            background-color: #302a34;
            font-size: 12px;
            position: absolute;
            top: 4200px;
            color: #f6f5f5;
        }

        #deng-xia-1-6 div {
            position: relative; /*相对定位*/
            top: 40px;
            text-align: center; /*文本内容居中*/
        }

    </style>
</head>
<body>
<!-----------------------------------------导航栏区域------------------------------------------------------------>
<div id="deng-shang-1">
    <div id="deng-shang-1-7">
        <a href=""><img id="deng-img-1-1"
                        src="https://www.17sucai.com/preview/10221/2017-05-23/zhukaoguan1/img/icon/site-brand.png"
                        alt=""></a>
        <ul id="deng-shang-1-2">
            <li class="deng-shang-1-3"><a class="deng-shang-1-4" href="index.html">首页</a></li>
            <li class="deng-shang-1-3"><a class="deng-shang-1-4" href="shaokao-2.html">招牌美食</a></li>
            <li class="deng-shang-1-3"><a class="deng-shang-1-4" href="shaokao-3.html">招牌加盟</a></li>
            <li class="deng-shang-1-3"><a class="deng-shang-1-4" href="04.html">企业情况</a></li>
            <li class="deng-shang-1-3"><a class="deng-shang-1-4" href="shaokao-4.html">联系我们</a></li>
            <li v-if="user==''" class="deng-shang-1-3"><a class="deng-shang-1-4" href="/login.html">管理员入口</a></li>
            <li v-if="user!=''" class="deng-shang-1-3"><a class="deng-shang-1-4" href="/admin.html">管理页面</a></li>

        </ul>
    </div>
    <!------------------------------------------烤鸡脖位置------------------------------------------------------------->

    <section id="Taset">
        <div style="color:black" id="d7">招牌美食</div>
        <div>
            <div id="hbyb"><img src="https://www.17sucai.com/preview/10221/2017-05-23/zhukaoguan1/img/pd/ad-1.jpg">
            </div>
            <div style="color: #dfd1b6" id="hbyb1">火爆鸭脖</div>
            <div style="color: #dfd1b6" id="hbyb2">采用37味香料文火熬制16小时的高汤秘卤，即时冰冻锁味，再炸制金黄味香味，最后经过果木白
                炭烤制香酥的火焰鸭脖，历经层层工艺只为追求酥脆，骨肉分<br>离，回味无穷，白吃不腻的美味极致
            </div>
        </div>
        <div>
            <div id="xsy"><img src="https://www.17sucai.com/preview/10221/2017-05-23/zhukaoguan1/img/pd/ad-2.jpg"></div>
            <div style="color: #dfd1b6" id="xsy1">香酥鱼</div>
            <div style="color: #dfd1b6" id="xsy2">以色泽黄亮，色香味美，骨酥肉嫩，溢香爽口而著称的浙江绍兴酥鱼经过秘门的刀工，油炸
                和调料，外香里嫩，鲜酥可口，甜咸兼有，香味浓郁的酥鱼，让食客<br>赞不绝口。
            </div>
        </div>
        <div>
            <div id="kzt"><img src="https://www.17sucai.com/preview/10221/2017-05-23/zhukaoguan1/img/pd/ad-3.jpg"></div>
            <div style="color: #dfd1b6" id="kzt1">烤猪蹄</div>
            <div style="color: #dfd1b6" id="kzt2">胶原蛋白美容圣品烤猪蹄，精选48余种名贵中草药调制而成。以
                秘制酱料精心调配烧烤，不油腻，不上火，骨酥肉嫩，鲜香麻辣，十里飘香，令人胃口打开，百<br>吃不厌，吃后久久回味。<br>
                主烤官不断突破口味难关，提供更丰富的选择，让食客每次尝到不同的味道，舌尖得到充分的享受。
            </div>
        </div>
        <div>
            <div id="lyrjb"><img src="https://www.17sucai.com/preview/10221/2017-05-23/zhukaoguan1/img/pd/ad-4.jpg">
            </div>
            <div style="color: #dfd1b6" id="lyrjb1">腊鸭肉卷饼</div>
            <div style="color: #dfd1b6" id="lyrjb2">以全麦优质粉加鸡蛋与牛奶和面的面饼，口感绵软又劲道，包裹冬笋丝，香菇
                ，菜心丝，豆芽各种蔬菜，和独家配方秘制烟熏鸭脯肉等馅料
            </div>
        </div>
    </section>
    <!---------------------------------------------小图部分---------------------------------------------------->
    <div class="row" id="showFood">
        <div class="col_6"><div class="it-food1"><img src="https://www.17sucai.com/preview/10221/2017-05-23/zhukaoguan1/img/food/f-1.jpg" alt=""></div><div class="dh3"><h3>烤鱼豆腐 烤墨鱼丸 烤大虾 烤鱿鱼 烤秋刀</h3></div></div>
        <div class="col-3" v-for="f in food"><div class="it-food2"><img :src="f.url" alt=""></div><div class="dh3"><h3 v-text="f.name">香辣豆干</h3></div></div>
    </div>
<!-------------------------------------最下边----------------------------------------------------------------->
    <div id="deng-xia-1-6">
        <div>联系电话:13889862323 联系人:黄先生</div>
        <div>Copyright © 2019-2021 www.a-ui.cn 地址：沈阳市皇姑区黄河大街昆山路43号</div>
    </div>





</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入axion-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
    let vm = new Vue({
        el:"#deng-shang-1-2",
        data:{user:{}},
        created:function () {
            axios.get("/check").then(function (response) {
                vm.user=response.data
            })
        }
    })
    let showFood = new Vue({
        el:"#showFood",
        data:{food:[]},
        created:function () {
            axios.get("/food/show").then(function (response) {
                showFood.food=response.data
            })
        }
    })
</script>
</body>
</html>